<template>
  <el-row style="justify-content: center;align-items:center;height: 5vh;">
    <div style="width: 100%;display: flex;background-color: white">
      <el-text style="flex: 2;padding-left: 2%">常进货分类：&nbsp;&nbsp;&nbsp;&nbsp;</el-text>
      <el-menu :default-active="curType" mode="horizontal" @select="handleSelect" style="flex: 22">
        <el-menu-item index="全部" style="border-bottom: 1px solid #c5c5c5;">
          <el-text >全部</el-text>
        </el-menu-item>
        <el-menu-item v-for="item in typeList" :key="item" :index="item" style="border-bottom: 1px solid #c5c5c5;">
          <el-text >{{item}}</el-text>
        </el-menu-item>
      </el-menu>
    </div>
  </el-row>
  <div style="margin-top: 2vh">
    <el-table :data="tableData(curGoodsStoreList)"
              height="74vh"
              style="width: 100%;"
              :header-cell-style="{ background: '#f6f6f6', 'text-align': 'center' }"
              :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column label="商品名/条码" width="300">
        <template #default="scope">
          <el-row align='middle'>
            <el-col span="5">
              <el-image :src="scope.row.image" style="height: 70px;">
                <template #error>
                  <div class="image-slot">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </el-col>
            <el-col span="19" style="padding-left: 5%;">
              <el-row style="max-width: 145px"><el-text>{{ scope.row.goodsName }}</el-text></el-row>
              <el-row><el-text>{{ scope.row.code }}</el-text></el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="cost" label="成本价" />
      <el-table-column prop="inventory" label="库存"/>
      <el-table-column prop="salesVolume" label="近半年销售额"/>
      <el-table-column prop="salesNum" label="近半年销量"/>
      <el-table-column prop="transactionsNum" label="近半年交易笔数"/>
      <el-table-column prop="purchaseTimes" label="近半年进货次数"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="warning" round @click="showAdd(scope.row)">进货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="justify-content: center;align-items:center;height: 60px; background-color: rgba(255,255,255,0.72);boxShadow:1px 0px 1px #a6a6a6;z-index: 999;display: flex;padding: 5px 25px 5px 25px;">
      <div style="flex: 4;" >
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="true"
            layout="->,prev, pager, next, jumper"
            :total="curGoodsStoreList.length"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>

  <el-dialog v-model="isShowAdd" title="进货" width="20%">
    <div style="margin-bottom: 10%">
      <div><el-text size="large">{{dataTemp.goodsName}}</el-text></div>
      <div><el-text size="small">{{dataTemp.code}}</el-text></div>
    </div>
    <el-form :model="dataTemp" label-width="70px">
      <el-form-item label="进货数量" prop="num">
        <el-input-number v-model="dataTemp.num" :min="1" style="width: 60%"/>
      </el-form-item>
      <el-form-item label="总价(元)" >
        <el-text>{{dataTemp.num*dataTemp.cost}}</el-text>
      </el-form-item>
    </el-form>
    <div>
      <el-button round size="large" type="warning" style="width: 100px;margin-left: 12%" @click="inPurchase">
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>

import {onMounted, ref} from "vue";
import request from "@/utils/request";
import {store} from "@/store";
import {ElMessage} from "element-plus";

const typeList=ref([])
const goodsStoreList=ref([])
const curType=ref("全部")
const curGoodsStoreList=ref([])
const currentPage = ref(1)
const pageSize = ref(30)
const dataTemp=ref({})
const isShowAdd=ref(false)
onMounted(()=>{
  request.get("/goods/get/frequentPurchase/"+store.getLocalCurrentStoreMain().storeId).then(res=>{
    for (let i in res.data){
      if (typeList.value.indexOf(res.data[i].goodsType)===-1)
        typeList.value.push(res.data[i].goodsType)
    }
    goodsStoreList.value=res.data
    curGoodsStoreList.value=goodsStoreList.value
  })
})
const handleSelect = (key) => {
  curType.value=key
  curGoodsStoreList.value=filList(key,goodsStoreList.value)
}
const filList = (key,list) => {
  if (key==="全部")
    key=""
  // 返回过滤后的数组
  return list.filter((p)=>{
    return p.goodsType.indexOf(key) !==-1
  })
}
const handleCurrentChange = (e) => {
  currentPage.value = e;
};
const tableData = (list) => {
  return list.filter(
      (item, index) =>
          index < currentPage.value * pageSize.value &&
          index >= pageSize.value * (currentPage.value - 1)
  );
};
const showAdd = (data) => {
  dataTemp.value=data
  dataTemp.value.storeId=store.getLocalCurrentStoreMain().storeId
  dataTemp.value.num=1
  isShowAdd.value=true
}
const inPurchase = () => {
  isShowAdd.value=false
  request.get("/goods/get/goodsPurchase/"+store.getLocalCurrentStoreMain().storeId+"?isDone=0").then(res=>{
    if (res.data.length===0){
      let goodsPurchase={
        name:Date.now(),
        storeId:store.getLocalCurrentStoreMain().storeId,
        orderDetailObject:[dataTemp.value],
      }

      request.post("/goods/add/goodsPurchase",goodsPurchase).then(res=>{
        ElMessage({
          message: '已新增进货单',
          type: 'success',
        })
      })
    }else {
      let Temp=[dataTemp.value]
      for (let item in Temp){
        if (res.data[0].orderDetailObject.filter((p)=>{return p.code.indexOf(Temp[item].code) !==-1}).length!==0){
          res.data[0].orderDetailObject[res.data[0].orderDetailObject.indexOf(res.data[0].orderDetailObject.filter((p)=>{
            return p.code.indexOf(Temp[item].code) !==-1})[0])]=Temp[item]
        }else {
          res.data[0].orderDetailObject.push(Temp[item])
        }
      }
      request.post("/goods/update/goodsPurchase",res.data[0]).then(res=>{
        ElMessage({
          message: '已将选中商品加入进货单',
          type: 'success',
        })
      })
    }
  })
}
</script>

<style scoped>
.el-menu-item.is-active {
  color: rgb(46, 126, 226) !important;
  font-weight: bold;
  border-bottom: 2px solid rgb(255, 181, 1);
}
</style>